<div class="container">
  <header class="header alert alert-primary">
    <div class="row justify-content-end align-items-center">
      <div class="col-4">
        <h2 class="title text-center">Hero Management Office</h2>
      </div>
      <div class="col-4">
        <a class="login" *ngIf="!currentUser; else userTpl" routerLink="/login">登录</a>
        <ng-template #userTpl>
          <div class="dropdown">
            <a
              class="dropdown-toggle"
              id="dropdownMenuButton"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              (click)="showDropMenu = !showDropMenu"
            >{{ currentUser.name }}</a>
            <div class="dropdown-menu" [class.d-block]="showDropMenu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" routerLink="user-center">个人中心</a>
              <a class="dropdown-item" (click)="logout()">退出登录</a>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </header>
  <nav aria-label="breadcrumb">
    <ul class="breadcrumb">
      <li class="breadcrumb-item" *ngFor="let item of breadCrumbs">{{ item }}</li>
    </ul>
  </nav>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>
